<template>
  <div class="app-container">
    <div class="filter-container">

      <div class="filter-item">
        <el-input v-model="query.name" placeholder="商品名称"></el-input>
      </div>

      <div  class="filter-item">
        <el-cascader placeholder="分类"
          v-model="query.selectClassifyId"
          :options="classifies"
          :props="{ expandTrigger: 'hover' ,value:'id',label:'name'}"
           ></el-cascader>
      </div>

      <div class="filter-item">
        <el-select v-model="query.selectBrandId" placeholder="品牌">
<!--          <el-option label="全部" :value="0" ></el-option>-->
          <el-option v-for="(item,index) in brands" :label="item.name" :value="item.id" :key="index"></el-option>
        </el-select>
      </div>

      <el-button @click="queryRecords" type="primary" class="filter-item">查询</el-button>
      <el-button @click="reload" type="danger" class="filter-item">刷新</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      v-horizontal-scroll="'always'"
      >
      <el-table-column prop="id" label="ID" min-width="80" />
      <el-table-column prop="name" label="商品名称" min-width="120" />
      <el-table-column prop="get_classify.name" label="分类" min-width="100" />
      <el-table-column prop="get_brand.name" label="品牌" min-width="100" />
      <el-table-column prop="desc_detail" label="商品详情" min-width="200" />
      <el-table-column prop="comment_count" label="评论量" min-width="50"  />
<!--      <el-table-column prop="stock" label="库存"  min-min-width="50" />-->
      <el-table-column prop="created_at" label="创建时间" min-width="120" />
      <el-table-column prop="status" label="状态" min-width="100" >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#409EFF"
            inactive-color="#909399"
            :active-value="1"
            :inactive-value="2"
            @change="changeSwitch(scope.row)">
          </el-switch>
        </template>

      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="100">
        <template slot-scope="scope">
        <el-button  size="mini"  type="text" @click="editGoods(scope.row.id)">编辑</el-button>
      </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.pagination.currentPage"
      :page-sizes="[5, 20, 100, 200]"
      :page-size="this.pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.pagination.total">
    </el-pagination>

  </div>
</template>

<script>
import { myGet } from '@/utils/myUtils';


const urlGoodsLst = '/guard/shop/goods/spu/lst'
const urlGoodsChangeStatus = '/guard/shop/goods/spu/changeStatus'
const urlBrandLst = '/guard/shop/goods/brand/lst'

export default {

  data() {
    return {

      brands:[],
      classifies:[],
      query:{
        selectClassifyId:[0],
        selectBrandId:0,
        name:'',
      },
      pagination:{
        page:1,
        pageSize:20,
        total:0,
      },
      list: [],
      listLoading: false
    };
  },

  mounted() {
    this.getRecords()
    this.getBrandAndClassifyLst()
  },

  methods: {
    reload(){
      Object.assign(this.$data.query,this.$options.data().query)
      Object.assign(this.$data.pagination,this.$options.data().pagination)
      this.getRecords()
    },
    queryRecords(){
      Object.assign(this.$data.pagination,this.$options.data().pagination)
      this.getRecords()
    },

    getRecords(){
      this.listLoading = true
      const params = Object.assign(this.query,this.pagination)
      myGet(urlGoodsLst,params).then(res=>{
        this.listLoading = false
        if(res.status){
          this.list = res.data.records
          this.pagination.total = res.data.total
        }
      })
    },
    getBrandAndClassifyLst(){
      myGet(urlBrandLst).then(res=>{
        if(res.status){
          this.brands = res.data.records
          this.classifies = res.data.classifies
        }
      })
    },

    editGoods(id){
      this.$router.push("/spu/edit/"+id)
    },

    changeSwitch(row){
      myGet(urlGoodsChangeStatus,{
        id:row.id,
        status:row.status
      }).then(res=>{
        if(res.status){
          this.$message.success(res.msg)
        }
      })
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.page = 1
      this.getRecords()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getRecords();
    },


  },
};
</script>

<style lang="scss" scoped>

</style>
